<template>
  <div>
    <div class="modal">
      <div class="modal-bg" @click="AddClose"></div>
      <div class="pub-w">
        <!--<div class="rele-titles">新增员工<span @click="AddClose">X</span></div>-->
        <div class="rele-titles"><span>新增员工</span><img  @click="AddClose" src="../assets/img/tub.png" alt=""></div>
        <div class="pub-list">
          <div class="pub-li">
            <div class="pub-title">姓名</div>
            <div class="pub-input"><input type="" name="" v-model="formData.account" placeholder="请输入您的姓名" style="border: 1px solid #a0a0a0"></div>
          </div>
          <div class="pub-li">
            <div class="pub-title">手机号</div>
            <div class="pub-input"><input type="" name="" v-model="formData.phone"  placeholder="请输入您的手机号码" style="border: 1px solid #a0a0a0"></div>
          </div>
          <div class="pub-li">
            <div class="pub-title">身份证</div>
            <div class="pub-input"><input type="" name="" v-model="formData.id_card" placeholder="请输入您的证件号码" style="border: 1px solid #a0a0a0;"></div>
          </div>
          <div class="pub-li">
            <div class="pub-title">区域</div>
            <div class="pub-input">
              <!--<input type="" name="" v-model="formData.department_id">-->
              <select @change="getMen" v-model="formData.department_id" placeholder="请选择" style="width:100%;border: 1px solid #a0a0a0;height: 28px; ">
                <option
                  v-for="item in Quyu"
                  :key="item.id"
                  :label="item.title"
                  :value="item.id">
                </option>
              </select>
            </div>
          </div>
          <div class="pub-li">
            <div class="pub-title">门店</div>
            <div class="pub-input">
              <!--<input type="" name="" v-model="formData.store_id">-->
              <select @change="getGroup" v-model="formData.store_id" placeholder="请选择" style="width:100%;border: 1px solid #a0a0a0;height: 28px;">
                <option
                  v-for="item in MenD"
                  :key="item.id"
                  :label="item.title"
                  :value="item.id">
                </option>
              </select>
            </div>
          </div>
          <div class="pub-li">
            <div class="pub-title">组别</div>
            <div class="pub-input">
              <!--<input type="" name="" v-model="formData.group_id">-->
              <select v-model="formData.group_id" placeholder="请选择" style="width:100%;border: 1px solid #a0a0a0;height: 28px;">
                <option
                  v-for="item in Groups"
                  :key="item.id"
                  :label="item.title"
                  :value="item.id">
                </option>
              </select>
            </div>
          </div>
          <div class="pub-li">
            <div class="pub-title">职务</div>
            <div class="pub-input">
              <select v-model="formData.job_id" placeholder="请选择" style="width:100%;border: 1px solid #a0a0a0;height: 28px;">
                <option
                  v-for="item in jobs"
                  :key="item.id"
                  :label="item.title"
                  :value="item.id">
                </option>
              </select>
            </div>
          </div>
          <div class="pub-li">
            <div class="pub-title">入职渠道</div>
            <div class="pub-input">
              <select v-model="formData.entry_channel_id" placeholder="请选择" style="width:100%;border: 1px solid #a0a0a0;height: 28px;">
                <option
                  v-for="item in entry_channel_ids"
                  :key="item.id"
                  :label="item.title"
                  :value="item.id">
                </option>
              </select>
            </div>
          </div>
          <div class="pub-li">
            <div class="pub-title">登陆密码</div>
            <div class="pub-input"><input type="password" name="" v-model="formData.password" placeholder="请输入您的密码" style="border: 1px solid #a0a0a0;height: 28px;"></div>
          </div>
          <div class="pub-li">
            <div class="pub-title">确认密码</div>
            <div class="pub-input"><input type="password" name="" v-model="formData.password_confirm" placeholder="请再次确认您的密码" style="border: 1px solid #a0a0a0;height: 28px;"></div>
          </div>
          <div class="pub-li">
           <div >
             <!--<span class="bz">备注：请到个人资料去完善资料</span>-->
             <button class="bz_box" @click="AddClose" >取消</button>
             <button class="bz_box" @click="staffSubmit">提交</button>
           </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script type="text/babel">
export default {
  props: {
    getstaff: {
      type: Function
    },
    LDmodal: {
      type: Function
    },
    AddClose: {
      type: Function
    },
    jobs: {
      type: Array
    },
    Quyu: {
      type: Array
    }
  },
  methods: {
    staffSubmit() {
      let that = this;
      that.$http
        .post("/index/staff", that.formData)
        .then(res => {
          console.log(res);
          if (res.data.status === 1) {
            that.AddClose();
            that.getstaff();
            that.$store.state.messageString = res.data.msg;
            that.LDmodal();
          } else {
            that.$store.state.messageString = res.data.msg;
            that.LDmodal();
          }
          console.log(res.data.msg);
        })
        .catch(err => {
          console.log(err);
        });
    },
    //获取门店
    getMen() {
      let that = this;
      that.$http
        .get("/index/department", {
          params: {
            id: that.formData.department_id
          }
        })
        .then(res => {
          that.MenD = res.data;
        })
        .catch(err => {
          console.log(err);
        });
    },
    //获取小组
    getGroup() {
      let that = this;
      that.$http
        .get("/index/department", {
          params: {
            id: that.formData.store_id
          }
        })
        .then(res => {
          that.Groups = res.data;
        })
        .catch(err => {
          console.log(err);
        });
    }
  },
  data() {
    return {
      MenD: [],
      Groups: [],
      formData: {},
      entry_channel_ids: [
        { id: 1, title: "人事招聘" },
        { id: 2, title: "员工推荐" },
        { id: 3, title: "其它" }
      ]
    };
  },
  computed: {}
};
</script>

<style scoped>
.modal {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
}
.bz {
  color: #999;
  right: 20px;
  margin-bottom: 10px;
  display: inline-block;
  position: relative;
}
.bz_box {
  top: 20px;
  left: 33px;
  position: relative;
  border: none;
  width: 70px;
  height: 35px;
  border-radius: 5px;
  background-color: #1590ed;
  cursor: pointer;
}

.pub-list {
  width: 100%;
  float: left;
  margin-top: 65px;
  text-align: center;
}
.pub-input {
  width: 65%;
  float: left;
}
.pub-input input {
  width: 100%;
  line-height: 27px;
  height: 27px;
  float: left;
  box-sizing: border-box;
  border: 1px solid #d3d3d3;
  cursor: pointer;
}
.pub-li {
  /*margin-top: 10px;*/
  width: 80%;
  display: inline-block;
}
.pub-title {
  width: 30%;
  line-height: 27px;
  text-align: center;
  font-size: 0.8em;
  float: left;
  font-weight: bold;
}
.pub-w {
  width: 20%;
  height: 440px;
  padding-bottom: 10px;
  overflow: hidden;
  background: #ffffff;
  border-radius: 5px;
  position: relative;
  z-index: 10;
}
img:hover {
  background: #bd2c00 !important;
  color: #ffffff;
}

img {
  /*position: fixed;*/
  /* flex-star:40px; */
  /*margin-left: 44%;*/
  /* position: relative; */
  cursor: pointer;
  border-radius: 10px;
}
img {
  left: 110%;
}
.rele-titles {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  width: 100%;
  line-height: 50px;
  font-size: 2em;
  color: #000;
  background: #f5f5f7;
  position: absolute;
  z-index: 9;
  border-bottom: 1px solid #d3d3d3;
}
select {
  cursor: pointer;
}
</style>
